<template>
	<div class="ui-carousel" :style="style" :class="classname">
		<span class="u-carousel-left font u-carousel-icon"   @click="click('left')"   :class="btnstyle==2?'u-carousel-icon2':''">&#xe660;</span>
		<span class="u-carousel-right font u-carousel-icon"  @click="click('right')"  :class="btnstyle==2?'u-carousel-icon2':''">&#xe65f;</span>
		<a :href="v.href?v.href:'#'" v-for="(v,k) in data"  class="ui-carousel-a" :class="v.isshow" :style="'background-image:url('+v.img+')'" :target="v.href?'_blank':'_self'"></a>
		<a class="u-carousel-text" :href="data[recordNum].href" v-if="showtext">{{data[recordNum].title}}</a>
	</div>
</template>

<script>
	/*
	组件属性[
		style:自定义样式
		classname:自定义class
		data:走马灯图片列表 array=[{href:'链接地址',img:"图片路径",title:"文字"},...	]
		time:默认间隔时间 默认5000毫秒
		btnstyle:左右箭头样式  1：带底色的箭头（默认），2：无底色箭头
		showtext:是否显示文字 true/false
	]
	*/
	export default{
		props:{
			'style':{type:null,default:""},
			'classname':{type:null,default:""},
			'time':{type:Number,default:5000},
			'btnstyle':{type:Number,default:1},
			'showtext':{type:Boolean,default:false},
			'data':{
				type:Array,
				default:[
					{href:'',img:"http://www.dabeiduo.com/Public/Img/bd2.11_img27.jpg",title:"标题一"},
					{href:'javascript:',img:"http://img.dabeiduo.cn:9004/Img/Scenic/1/7a516e680aa861e985513dc0fee3.jpg",title:"标题二"},
					{href:'javascript:',img:"http://img.dabeiduo.cn:9004/UploadV2_1/Catering/5913c3ff4a645.jpg",title:"标题三"}
				]
			}
		},
		data(){
			return {
				uiType:"ui-carousel",
                recordNum:0,//当前图片
            }
		},
        methods:{
			click(mode){
			    //点击左右切换按钮
				mode=='left'?this.recordNum--:this.recordNum++;
                this.swidthImg();
			},
			swidthImg(){
			    //切换图片
                if(this.recordNum>=this.data.length)this.recordNum=0;
                if(this.recordNum<0)this.recordNum=this.data.length-1;
                for(let a=0;a<this.data.length;a++){
                    this.$set(this.data[a],'isshow',a==this.recordNum?"on":"");
                }
			}
		},
        mounted(){
		    //初始化显示
           let self=this;
            for(let a=0;a<this.data.length;a++){
               this.$set(this.data[a],'isshow',a==0?"on":"");
            }
            //定时切换图片展示
		   setInterval(()=>{
               self.recordNum++;
               this.swidthImg();
           },this.time);
		}
	}
</script>
